<template>
	<view class="shelfcard-box" :style="{opacity}">
		<u-image width="182rpx" height="240rpx" border-radius="12" :src="image" mode="cover" :fade="true" duration="450">
			<u-loading slot="loading"></u-loading>
		</u-image>
		<view class="shelfcard-name u-line-1">{{name}}</view>
		<view class="shelfcard-info u-line-1">
			<text class="shelfcard-over">{{is_over}}</text>
			<text>/</text>
			<text class="shelfcard-percentage">{{percentage}}</text>
		</view>
		<u-badge v-show="is_update" :is-dot="true" type="error" is-center></u-badge>
	</view>
</template>

<script>
	export default {
		name: 'ShelfCard',
		data() {
			return {

			};
		},
		props: {
			name: String,
			is_over: String,
			index: {
				type: [String, Number]
			},
			chapter_count: {
				type: [String, Number]
			},
			bookId: {
				type: [String, Number]
			},
			chapter_id: {
				type: [String, Number]
			},
			image: {
				default: "http://foglake.sanye666.top/images/default-covor.jpg",
				type: String,
			},
			is_update: {
				default: false,
				type: Boolean
			},
			opacity: {
				default: 1,
				type: Number
			},
			isClick: {
				default: true,
				type: Boolean
			}
		},
		computed: {
			percentage() {
				if (this.index === 0) {
					return '未读'
				} else {
					if (this.index === this.chapter_count) {
						return '已读完'
					} else {
						let _percentage = Number(Number(this.index) / Number(this.chapter_count) * 100)
						if(Number.isNaN(_percentage) || !Number.isFinite(_percentage)){
							return '未知'
						}else{
							return `${_percentage.toFixed(2)}%`
						}
					}
				}
			}
		},
		methods: {
			handleToRead(id, chapter_id) {
				if (!this.isClick) return;
				uni.navigateTo({
					url: `/pages/read/read?bookId=${this.bookId}&chapterId=${this.chapter_id}`,
				})
			}
		}
	}
</script>

<style scoped>
	.shelfcard-box {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin-bottom: 37rpx;
		position: relative;
	}

	.shelfcard-name {
		font-size: 28rpx;
		width: 182rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 700;
		color: rgba(6, 27, 65, 0.75);
		margin-top: 20rpx;
		margin-left: 8rpx;
	}

	.shelfcard-info {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: rgba(6, 27, 65, 0.35);
		margin-left: 8rpx;
	}

	.shelfcard-over {}

	.shelfcard-percentage {}
</style>
